<template>
  <PanelGroup
    :year="yearWatchTime"
    :month="monthWatchTime"
    :week="weekWatchTime"
    :day="dayWatchTime"
  />
  <div
    ref="weekThreeWatchTimeEchartsRef"
    style="width: 1400px; height: 400px; background-color: white; margin: 30px 0px"
  ></div>
  <div
    ref="monthWatchTimeEchartsRef"
    style="width: 1400px; height: 400px; background-color: white; margin: 30px 0px"
  ></div>
  <div
    ref="echartsRef"
    style="width: 600px; height: 400px; background-color: white; margin: 30px 0px"
  ></div>
</template>
<script setup lang="ts">
import PanelGroup from '@/views/Home/components/PanelGroup.vue'
import { onMounted, ref } from 'vue'
import {
  lastThreeYearApi,
  monthWatchTimeApi,
  textDescriptionApi,
  weekThreeWatchTimeApi
} from '@/api/resLibrary/video'
import * as echarts from 'echarts'

const yearWatchTime = ref('0')
const monthWatchTime = ref('0')
const weekWatchTime = ref('0')
const dayWatchTime = ref('0')
const echartsRef = ref(null)
const monthWatchTimeEchartsRef = ref(null)
const weekThreeWatchTimeEchartsRef = ref(null)
onMounted(() => {
  textDescription()
  lastThreeYear()
  monthWatchTimeEcharts()
  weekThreeWatchTimeEcharts()
})
const textDescription = () => {
  textDescriptionApi({}).then((res) => {
    if (res.code == '00000') {
      yearWatchTime.value = res.data.year
      monthWatchTime.value = res.data.month
      weekWatchTime.value = res.data.week
      dayWatchTime.value = res.data.day
    }
  })
}

const lastThreeYear = () => {
  const myChart = echarts.init(echartsRef.value)
  const option = {
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar'
      }
    ]
  }
  lastThreeYearApi({}).then((res) => {
    option.series[0].data = res.data.series
    option.xAxis['data'] = res.data.xAxis
    myChart.setOption(option)
  })
}
const monthWatchTimeEcharts = () => {
  const monthWatchTimeEcharts = echarts.init(monthWatchTimeEchartsRef.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ]
  }
  monthWatchTimeApi({}).then((res) => {
    option['series'] = res.data.seriesData
    option.xAxis[0]['data'] = res.data.xAxisData
    option.legend['data'] = res.data.legendData
    monthWatchTimeEcharts.setOption(option)
  })
}
const weekThreeWatchTimeEcharts = () => {
  const weekThreeWatchTimeEcharts = echarts.init(weekThreeWatchTimeEchartsRef.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ]
  }
  weekThreeWatchTimeApi({}).then((res) => {
    option['series'] = res.data.seriesData
    option.xAxis[0]['data'] = res.data.xAxisData
    option.legend['data'] = res.data.legendData
    weekThreeWatchTimeEcharts.setOption(option)
  })
}
</script>
